<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/html/js/axios.min.js"></script>
    <script src="/html/js/util.js"></script>
    <script>
        window.onload = function (){
            showShop();
        }
        async function showShop(){
            var info = await ajaxGet("/shop/findByUser");
            var total = 0;
            var str = "";
            for(var i=0;i<info.length;i++){
                var obj = info[i];
                str += `<tr><td>${obj.product.name}</td>
                <td>${obj.product.money}</td><td>${obj.product.area}</td>
                <td><input type="text" onblur="upateNum(${obj.id},this.value)" value="${obj.num}"></td>
                <td>${obj.num * obj.product.money}</td>
                <td><a href="javascript:del(${obj.id})">移除商品</a></td></tr>`;
                total += obj.product.money * obj.num;
            }
            $("data").innerHTML = str;
            $("totalSpan").innerHTML = total;
        }

        /**
         * 移除商品
         * @param id
         * @returns {Promise<void>}
         */
        async function del(id){
            var info = await ajaxGet("/shop/del",{id});
            if(info == "ok"){
                showShop();
            }
        }

        async function upateNum(id,num){
            var info = await ajaxGet("/shop/update",{id,num});
            if(info == "ok"){
                showShop();
            }
        }

        function addOrder(){
            location.href = "/html/custom/addOrder.html?totalPrice="+$("totalSpan").innerHTML;
        }
    </script>
</head>
<body>
    <h2>你的购物车有如下商品</h2>
    <table border="1" cellspacing="0" width="60%">
        <thead><tr><th>商品名</th><th>单价</th><th>产地</th>
            <th>购买数量</th><th>单项总价</th><th>操作</th></tr></thead>
        <tbody id="data"></tbody>
    </table>
    购物车总价：￥<span id="totalSpan"></span>
    <div>
        <a href="/html/index.html" style="margin-right: 100px">继续购物</a>
        <a href="javascript:addOrder()">结帐</a>
    </div>
</body>
</html>